<template>
  <div class="page-container">
    <header-nav/>
    <media :query="{maxWidth: 768}">
      <div class="mb-media">
        <van-tabs v-model="tabActive">
          <van-tab title="个人信息">
            <update-info/>
          </van-tab>
          <van-tab title="账户安全">
            <bind-info/>
          </van-tab>
        </van-tabs>
      </div>
    </media>
    <media :query="{minWidth: 768}">
      <div class="pc-media">
        <user-box/>
      </div>
    </media>
    <media :query="{minWidth: 768}">
      <footer-nav/>
    </media>
  </div>
</template>

<script>
// import $ from 'jquery';
import Media from 'vue-media';
import Header from '../components/header';
import Footer from '../components/footer';
import UpdateInfo from '../components/updateInfo';
import BindInfo from '../components/bindInfo';
import PcUserInfo from '../components/PcUserInfo';
export default {
  name: 'UserCenter',
  data() {
    return {
      tabActive: 0
    };
  },
  created() {
    if (!this.$cookies.isKey('token')) {
      this.$router.back(-1);
    }
  },
  components: {
    'header-nav': Header,
    'footer-nav': Footer,
    'update-info': UpdateInfo,
    'bind-info': BindInfo,
    'user-box': PcUserInfo,
    Media
  }
};
</script>

<style>

</style>
